import React, { Component } from 'react'
import './tabControll.css'
class TabControll extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
      currentIndex : 0
    }
  }
  getCurrentIndex(index) {
    this.setState({ currentIndex: index })
    // 调用父组件传来的函数，把子组件参数(index)传给父组件
    this.props.getTabsIndex(index)
  }
  render() {
    const {title } = this.props
    const { currentIndex } = this.state
    return (
      <div className='tabs'>
        {title.map((item, index) => <div  key={item}><span onClick={e => {this.getCurrentIndex(index)}} className={currentIndex  === index ? 'active' : ''}>{ item }</span> </div>)}
      </div>
    )
  }
}

export default TabControll